<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm"  ref="dialogForm" :rules="rules" :label-width="formLabelWidth">
		<el-card class="box-card">
		  <div slot="header" class="clearfix">
		    <span style="line-height: 30px;">汽车信息</span>
		  </div>
		  <div  class="text item">
			    <el-form-item label="订单号"  >
			      <el-input  v-model="carOrder.orderNumber" auto-complete="off" disabled ></el-input>
			    </el-form-item>
			  	<el-form-item label="经销商名称"  >
			      <el-input v-model="carOrder.dealerName" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="汽车车型" >
			      <el-input v-model="carOrder.carName" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="汽车数量" >
			      <el-input v-model="carOrder.amount" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="汽车颜色" >
			      <el-input v-model="carOrder.color" auto-complete="off" disabled></el-input>
			    </el-form-item>
			    <el-form-item label="指导价/配置" >
			       <el-input type="textarea" :rows=3 v-model="carOrder.carConfig" auto-complete="off" disabled></el-input>
			    </el-form-item>
			</div>
		</el-card>
		<el-card class="box-card" style="margin-top:15px;">
		  <div slot="header" class="clearfix">
		    <span style="line-height: 30px;">验车信息</span>
		  </div>
		  <div  class="text item">
		  	<el-form-item label="验车图片"  class="is-required">
		        <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu>
		    </el-form-item>
		    <el-form-item label="车架号"  prop="vin">
		      <el-input type="textarea" :rows=3 v-model="dialogForm.vin" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
		      <span style="color:red;">注：若存在多个车架号，车架号间用“;”分隔（输入法处于英文状态）。如：车架号1;车架号2;车架号3</span>
		    </el-form-item>
		    <el-form-item label="生产年月" >
		      <el-input type="textarea" :rows=3 v-model="dialogForm.productionDate" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="100"></el-input>
		    </el-form-item>
		  	<el-form-item label="备注说明" >
		      <el-input type="textarea" :rows=3 v-model="dialogForm.remark" auto-complete="off" :disabled="!dialogSendData.isAdd" :maxlength="200"></el-input>
		    </el-form-item>
		  </div>
		</el-card>
		
		<div style="text-align:right;margin-top:15px;">
			 <el-button @click="returnBack">返 回</el-button>
			 <el-button  type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
		</div>
		</el-form>
	</div>
</template>
<script>
    import qiniu from '@/views/qiniu/upload'
    import agentHttp from '@/utils/agentHttp.js'
    import {require,length30} from '@/utils/rules.js'
	export default{
		created(){
			this.selectData();			
        },
		props:['dialogSendData','tableData'],
		components:{qiniu},
		data(){
			return{
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogForm:{		                 
		        },
		        carOrder:"",
		         //七牛图片上传
		        qiniuImage:{
		        	id:"qiniuImage", //图片预览的id   
		        	image_uri:[]    //图片上传的列表  只含有url地址
		        },
		        rules: {		
					vin: [require("车架号")]
		        },
		        packJson:{
					maxLength:50,   //最大图片数量
					minLength:5,   //最大图片数量
					accept:"",//image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
					size:4    //图片大小  单位兆
				}
			}
		},methods:{
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {		          	
		            this.addData();		            
		          } else {
		            this.$nextTick(()=>{
			          	this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);
			            return false;
		            })
		          }
		        });
			},
			//初始化数据
		    selectData(){
		        agentHttp.get('adminApi/admin/car_inspection_info_add/view/'+this.dialogSendData.id).then((data)=>{	
		            if(data.success){
		            	this.carOrder=data.data;
		            } 
		        }) 
		    },
		    //新增提交
		    addData(){
		    	this.dialogForm.pic = this.qiniuImage.image_uri.join(",");
		    	if(this.dialogForm.pic.length<5){
		    		this.$message.warning('验车图片张数不能少于五张')
		    		return false;
		    	}
		    	
		    	this.dialogForm.carOrderId = this.dialogSendData.id;
		        agentHttp.postJson('adminApi/admin/car_inspection_info_add/add',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData',null);
		            	this.$message.success(data.data||"添加成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500)		            	
		            } 
		        }) 
		    },
		}
	};
	
</script>